<template>
	<div style="padding-bottom: 150rpx;">
		<div class="pdf_view" v-if="pdf_view_url" style="top: 0rpx;">
			<div style="text-align: center;background-color: #fff;height: 50px;margin-top: -20px;width: 100%;"
				class="pdfViewBtn" @click="pdf_view_url = ''">
				<span class="pdfViewBtn" style="margin: 0 auto;">关闭</span>
			</div>
			<scroll-view :scroll-y="true" class="scrollView" style="min-height: 95vh;text-align: right;posi">
				<iframe style="width: 100%; height: 95vh;"
					:src="'./static/pdfjs/web/viewer.html?file=' + encodeURI(pdf_view_url)" frameborder="0"></iframe>
			</scroll-view>
		</div>
		<div class="title">
			<p>目录：{{ title }}</p>
		</div>
		<div style="display: flex;justify-content: center;margin-bottom: 20px;">
			<div @click="tabActive(videoAlias)" :class="{'active':iSshow=='视频'}" style="margin: 0 30px;">{{videoAlias}}
			</div>
			<div @click="tabActive(meaningAlias)" :class="{'active':iSshow=='内容解读'}" style="margin: 0 30px;">
				{{meaningAlias}}</div>
			<div @click="tabActive(testAlias)" :class="{'active':iSshow=='测试题'}" style="margin: 0 30px;">{{testAlias}}
			</div>
		</div>

		<div v-show="iSshow=='视频'">
			<div class="video" v-if="videoPreview.length !== 0">
				<div class="content-title" style="padding-left:20rpx;">
					{{ videoAlias }}
				</div>
				<div class="w100" v-for="(item, index) in videoPreview" :key="index">
					<video style="z-index: 999;" v-show="!pdf_view_url" :src="item.url" @play="playing" :id="item.id" :data-id="item.id" :autoplay="false" :controls="true" ref="videoRefs"></video>
				</div>
			</div>
		</div>

		<div v-show="iSshow=='内容解读'">
			<div class="content" v-if="meaningPreview.length !== 0">
				<div class="content-title">
					{{ meaningAlias }}
				</div>
				<scroll-view v-for="(item, index) in meaningPreview" :key="index" :scroll-y="true" class="scrollView"
					style="min-height: 800rpx;margin-top: 20rpx;text-align: right;">
					<iframe style="width: 100%; height: 750rpx;"
						:src="'./static/pdfjs/web/viewer.html?file=' + encodeURI(item)" frameborder="0"></iframe>
					<div style="text-align: right;">
						<a @click="pdfViewMethod(item)" class="pdfViewBtn">预览</a>
						<a @click="docDownload(meaningEdit[index])" class="downFile">下载</a>
					</div>
				</scroll-view>
			</div>
		</div>
		<div v-show="iSshow=='测试题'">
			<div class="test" v-if="testPreview.length !== 0">
				<div class="content-title">
					{{ testAlias }}
				</div>
				<div class="exam-list">
					<div class="exam-item" v-for="(item, index) in testPreview" :key="item.id">
						<div class="exam-item-line">
							<div class="exam-item-left">{{ index + 1 }}.</div>
							<div class="exam-item-right">
								<span v-if="item.type == 1">(单选题)</span>
								<span v-if="item.type == 2">(多选题)</span>
								<span v-if="item.type == 3">(判断题)</span>
								<span>
									{{ item.title }}
								</span>
							</div>
						</div>
						<div class="exam-item-line" v-if="item.type == 1 || item.type == 2">
							<div class="exam-item-left">选项:</div>
							<div class="exam-item-right">
								<div style="display: flex;" v-for="(opt, idx) in item.choose" :key="idx">
									<div>{{ xuanxiang[idx] }}:</div>
									<div style="margin-left: 10rpx;">{{ opt }}</div>
								</div>
							</div>
						</div>
						<div class="exam-item-line">
							<div class="exam-item-left">答案:</div>
							<div class="exam-item-right">
								<template v-if="item.type == 1 || item.type == 2">
									<template v-if="!item.showTrueAnswer">
										<span
											style="text-decoration: underline;white-space: pre-wrap;display: inline-block;"
											v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
										<span
											style="text-decoration: underline;white-space: pre-wrap;display: inline-block;"
											v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
									</template>
									<template v-else>
										<span
											style="text-decoration: underline;white-space: pre-wrap;display: inline-block;"
											v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
										<span style="text-decoration: underline;"
											v-for="ite in item.answer">{{ xuanxiang[ite - 1] }}</span>
										<span
											style="text-decoration: underline;white-space: pre-wrap;display: inline-block;"
											v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
									</template>
								</template>
								<template v-if="item.type == 3">
									<template v-if="!item.showTrueAnswer">
										<span
											style="text-decoration: underline;white-space: pre-wrap;display: inline-block;"
											v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
										<span
											style="text-decoration: underline;white-space: pre-wrap;display: inline-block;"
											v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
									</template>
									<template v-else>
										<span
											style="text-decoration: underline;white-space: pre-wrap;display: inline-block;"
											v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
										<span
											style="text-decoration: underline;">{{ item.answer[0] == 1 ? '√' : '×' }}</span>
										<span
											style="text-decoration: underline;white-space: pre-wrap;display: inline-block;"
											v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
										</span>
									</template>
								</template>

								<template>
									<a style="margin-left: 20rpx;position: relative; top: -10rpx;"
										v-if="!item.showTrueAnswer" @click="item.showTrueAnswer = !item.showTrueAnswer"
										class="downFile">提示</a>
									<a style="margin-left: 20rpx;position: relative; top: -10rpx;" v-else
										@click="item.showTrueAnswer = !item.showTrueAnswer" class="downFile">关闭提示</a>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	// import Base64 from "base-64"

	export default {
		data() {
			return {
				aaa:'',
				title: "",
				mindId: "",
				trailer: [], // 创建一个数组
				videoPreview: [],
				meaningPreview: [],
				testPreview: [],
				meaningEdit: [],
				videoAlias: "视频",
				meaningAlias: "内容解读",
				testAlias: "测试题",
				iSshow: '视频',
				xuanxiang: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'],
				pdf_view_url: ""
			}
		},
		onLoad(option) {
			this.title = option.name;
			this.mindId = option.id;
			this.getMindDetail();
		},
		mounted() {
			// console.log(Base64.encode(123)); 
		},
		methods: {
			playing(e){
				// uni.createVideoContext('1').pause()
				// 获取当前视频id
				console.log('333',e)
				let currentId = e.currentTarget.dataset.id
				// uni.createVideoContext获取视频上下文对象
				// 获取json对象并遍历, 停止非当前视频 
				let trailer = this.videoPreview
				for (let i = 0; i < trailer.length; i++) {
					let temp = this.videoPreview[i].id
				  if (temp !== currentId) {
					this.aaa = temp.toString()
					uni.createVideoContext(this.aaa).pause()
				  }
				}
			},
			
			//ios下载
			docDownload(url) {
				var urlStr = encodeURI(url)
				//#ifdef APP-PLUS
				if (plus.os.name == 'Android') {
					plus.runtime.openURL(urlStr);
				} else if (plus.os.name == 'iOS') {
					plus.runtime.openURL(urlStr);
				} else {

				}
				//#endif
			},
			pdfViewMethod(item) {
				this.pdf_view_url = item;
			},
			getMindDetail() {
				this.pyReq(this.$http.getMindDetail, {
					mindId: this.mindId
				}, (res) => {
					if (res.code == 0) {
						const {
							videoPreview,
							meaningPreview,
							testPreview,
							meaningEdit,
							videoAlias,
							meaningAlias,
							testAlias,
						} = res.result;
						(videoPreview || []).map((item,index) => {
							this.videoPreview.push({
								id:index,
								url:item
							})
						});
						// this.videoPreview = (videoPreview || []);
						console.log('wewe',this.videoPreview)
						this.meaningPreview = meaningPreview || [];
						// this.meaningPreview = meaningPreview.map(item => {
						// 	return encodeURIComponent(Base64.encode(encodeURI(item)))
						// }) || [];
						this.testPreview = (testPreview || []).map(item => {
							return {
								...item,
								showTrueAnswer: false
							}
						});
						this.meaningEdit = meaningEdit || [];
						this.videoAlias = videoAlias || '视频';
						this.meaningAlias = meaningAlias || '内容解读';
						this.testAlias = testAlias || '测试题';
					}
				});
			},
			tabActive(item) { //tab切换
				console.log(item)
				if(item == '内容解读' || item == '测试题'){
					let trailer = this.videoPreview
					for (let i = 0; i < trailer.length; i++) {
						let temp = this.videoPreview[i].id
						  this.aaa = temp.toString()
						  uni.createVideoContext(this.aaa).pause()
					}
				}
				this.iSshow = item
			}
		}
	}
</script>

<style scoped>
	.title {
		/* text-align: center; */
		font-size: 36rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
		margin-left: 10px;
	}

	.video {
		padding: 0 20rpx;
	}

	.w100 {
		width: 100%;
		text-align: center;
		margin-top: 30rpx;
	}

	.content,
	.test {
		padding: 0 40rpx;
		margin-top: 30rpx;
	}

	.content-title {
		font-size: 40rpx;
		font-weight: bolder;
		margin-left: -16rpx;
		border-top: 1px dashed #eee;
	}

	.exam-item {
		position: relative;
		margin-bottom: 20rpx;
	}

	.exam-item::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -20rpx;
		transform: translateX(-50%);
		height: 1px;
		background-color: #eee;
		width: 50%;
	}

	.exam-item-line {
		display: flex;
		margin-bottom: 10rpx;
	}

	.exam-item-left {
		width: 90rpx;
		text-align: right;
	}

	.exam-item-right {
		flex: 1;
		margin-left: 10rpx;
	}

	.active {
		border-bottom: 2upx solid #FF4351;
		color: #FF4351;
	}
</style>
